import React, { useState, useEffect } from 'react';
import {
  View,
  Image,
  StyleSheet,
  Text
} from 'react-native';

function WelcomePage (props) {
  const { navigation } = props;
  const [num, setNum] = useState(3);

  const init = () => {
    const timer1 = setTimeout(() => {
      clearTimeout(timer1);
      onToPage();
    }, 3000)

    const timer2 = setInterval(() => {
      setNum(c => c - 1);
      if (num <= 0) {
        clearTimeout(timer2);
      };
    }, 1000)
  }

  const onToPage = () => {
    navigation.navigate('Login');
  }

  useEffect(() => {
    init();
  }, []);

  return (
    <View style={styles.page}>
      <Text style={styles.numText}>{num}s</Text>
      <Image
        style={styles.bannerImg}
        source={require('../static/images/w1.png')}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  page: {
    flex: 1,
    position: 'relative'
  },
  bannerImg: {
    width: '100%',
    height: '100%'
  },
  numText: {
    position: 'absolute',
    top: 10,
    right: 10,
    width: 30,
    height: 30,
    borderRadius: 30,
    backgroundColor: '#fff',
    zIndex: 9999,
    textAlign: 'center',
    lineHeight: 30,
    fontSize: 14
  }
})

export default WelcomePage;